<template>
  <div>
    <el-dialog class="flashDiv" :visible="visible" @close="closeDialog">
      <!-- <el-button type="primary" @click="addCommod">添加商品</el-button>  -->
      <span slot="title">
        <p class="title_p">618秒杀活动</p>
      </span>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="按秒杀场次" name="first">
          <template>
            <el-table class="comArrayDiv" :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="秒杀场次名称" width="150"/>
              <el-table-column prop="startTime" label="每日开始时间" width="150"/>
              <el-table-column prop="endTime" label="每日结束时间" width="150"/>
              <el-table-column prop="allCount" label="计划商品数量" width="140"/>
              <el-table-column prop="joinCount" label="已参加商品数量" width="140"/>
              <el-table-column prop="addCount" label="本店铺参与商品数量" width="150"/>
              <el-table-column label="操作">
                <el-button type="text" @click="addCommod()">添加商品</el-button>
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
        <el-tab-pane label="按具体秒杀时间" name="second">
          <template>
            <el-table class="comArrayDiv" :data="detailTableData" style="width: 100%">
              <el-table-column prop="detailTime" label="秒杀日期" width="130"/>
              <el-table-column prop="name" label="秒杀场次名称" width="130"/>
              <el-table-column prop="startTime" label="每日开始时间" width="120"/>
              <el-table-column prop="endTime" label="每日结束时间" width="120"/>
              <el-table-column prop="allCount" label="计划商品数量" width="140"/>
              <el-table-column prop="joinCount" label="已参加商品数量" width="140"/>
              <el-table-column prop="addCount" label="本店铺参与商品数量" width="150"/>
              <el-table-column label="操作">
                <el-button type="text" @click="addCommod()">添加商品</el-button>
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <AddCom :addVisible="addVisible" @update-visible="updateVisible" />
  </div>
</template>
<script>
import AddCom from "./AddCommity.vue"
// import BySession from "./joinActivity/BySession.vue"
// import ByTime from "./joinActivity/ByTime.vue"
export default {
  name: 'joinActivity',
  components: {
    // BySession,
    // ByTime,
    AddCom
   },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeName: 'first',
      addVisible: false,
      tableData: [{
            name:'早上场次',
            startTime:'8:00',
            endTime:'10:00',
            allCount:20,
            joinCount:10,
            addCount:0,
          }],
          detailTableData: [{
            detailTime:'2024/6/1',
            name:'早上场次',
            startTime:'8:00',
            endTime:'10:00',
            allCount:20,
            joinCount:10,
            addCount:0,
          },{
            detailTime:'2024/6/2',
            name:'早上场次',
            startTime:'8:00',
            endTime:'10:00',
            allCount:20,
            joinCount:10,
            addCount:0,
          }
          
        ]
    }
  },
  methods: {
    closeDialog() {
      // 触发一个名为 'update-visible' 的事件，并传递新值  
      this.$emit('update-visible', false);
    },
    addCommod() {
      this.addVisible = true;
      console.log(this.addVisible);
    },
    updateVisible() {
      this.addVisible = false
      console.log(this.addVisible);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}

</script>
<style scoped>

.el-dialog__wrapper{
  z-index: 2003;
}

.flashDiv>>>.el-dialog__body {
  padding: 1% 0 0 2%;
}

.comArrayDiv {
  /* height: 330px; */
  /* margin-top: 25px; */
  display: flex;
  /* 设置为 flex 容器 */
  flex-direction: column;
  /* 默认情况下是列方向，但为了明确性可以指定 */
  justify-content: flex-end;
  /* 子项在交叉轴（这里是垂直方向）的末尾对齐 */
  align-items: flex-end;
  /* 子项在主轴（这里是水平方向）的末尾对齐 */
  position: relative;
  /* 或 absolute/fixed，取决于你的布局需求 */
  /* background-color: aqua; */
}

.comArrayDiv::after {
  content: "";
  /* 伪元素默认是空的，这里提供一个空字符串以避免某些浏览器的默认行为 */
  position: absolute;
  top: 99%;
  /* 向上移动以覆盖.comArrayDiv的一部分 */
  left: 0;
  right: 0;
  /* 根据需要调整宽度 */
  height: 5px;
  /* 伪元素的高度 */
  background-color: white;
  /* 半透明的蓝色背景 */
  z-index: 1;
  /* 确保伪元素在.comArrayDiv的内容之上 */
  /* ... 其他样式，如边框、圆角等 ... */
}

.comArrayDiv>>>.el-table td {
  height: 30px;
  width: 100%;
  font-size: 16px;
  padding: 5px 0;
  /* background-color: aqua; */
  border-bottom: none;
  /* margin: 0; */
}
</style>
